<template>
	<view>
		<!-- 渐变 -->
		<view class="lingr">
			
		</view> 
		<view class="goods">
			<view class="title">
				商品
			</view>
			<view class="goodsList">
				<view class="goodsList-card" v-for="(item,index) in 5">
					<view class="goodsImg">
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="goodsTitle">
						×××××××商品
					</view>
					<view class="goodsPrice">
						66积分+￥88888
					</view>
				</view>
			</view>
			
			<view class="title tl1">
				线下实体店
			</view>
			<view class="goodsList">
				<view class="goodsList-card" v-for="(item,index) in 5">
					<view class="goodsImg">
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="goodsTitle">
						×××××××商品
					</view>
					<view class="goodsPrice">
						66积分+￥88888
					</view>
				</view>
			</view>
			
			<view class="title tl1 flex-sw">
				<text>积分抢购</text>
				<view class="" style="display: flex;align-items: center;">
					<uni-icons style="position: relative;right: 5%;" type="cloud-upload" size="30"></uni-icons>
					<text class="colorTheme">
						限时抢购
					</text>
				</view>
				
			</view>
			<view class="goodsList">
				<view class="goodsList-card" v-for="(item,index) in 5">
					<view class="goodsImg">
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="goodsTitle">
						×××××××商品
					</view>
					<view class="goodsPrice">
						66积分+￥88888
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
	.lingr{
		width: 100%;
		height: 15vh;
		background-image: linear-gradient(to left bottom,#fffda6, #e1afc2,#fff1f4);
		position: relative;
	}
	.goods{
		width: 94%;
		position: relative;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%) translateY(-50rpx);
		.tl1{
			margin-top: 3%;
		}
		.title{
			font-size: 1.2rem;
			width: 100%;
			// margin-top: 5%;
		}
		.flex-sw{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		.goodsList{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.goodsList-card{
				width: 48%;
				min-height: 350rpx;
				border-radius: 20rpx;
				margin: 2% 0;
				background-color: #FFFFFC;
				overflow: hidden;
				.goodsImg{
					width: 100%;
					height: 65%;
					background-color: #007AFF;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.goodsTitle{
					padding-left: 10px;
					margin: 3% 0;
					font-weight: 600;
				}
				.goodsPrice{
					padding-left: 10px;
					margin-top: 4%;
					color: red;
					font-size: 0.8rem;
				}
				
			}
		}
		
	}
</style>
